<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>工行智能理财经理</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #e62a10 0%, #f5f5f5 100%);
            color: #333;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .chat-container {
            width: 90%;
            max-width: 1000px;
            height: 80vh;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            background-color: #e62a10;
            color: white;
            padding: 18px 20px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        .chat-header span {
            font-size: 14px;
            font-weight: normal;
            opacity: 0.9;
        }
        .chat-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
        }
        .message {
            max-width: 75%;
            margin-bottom: 15px;
            padding: 12px 16px;
            border-radius: 18px;
            line-height: 1.5;
            position: relative;
            word-wrap: break-word;
        }
        .bot-message {
            align-self: flex-start;
            background-color: #f1f1f1;
            color: #333;
        }
        .user-message {
            align-self: flex-end;
            background-color: #e62a10;
            color: white;
        }
        .input-area {
            display: flex;
            padding: 15px;
            background-color: #ffffff;
            border-top: 1px solid #eee;
        }
        #userInput {
            flex: 1;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 30px;
            outline: none;
            font-size: 16px;
        }
        #sendBtn {
            margin-left: 10px;
            padding: 10px 20px;
            background-color: #e62a10;
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        #sendBtn:hover {
            background-color: #c8230a;
        }
        .product-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 14px;
            margin-top: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .product-card h4 {
            margin: 0 0 6px 0;
            color: #e62a10;
        }
        .product-card p {
            margin: 4px 0;
            font-size: 14px;
            color: #555;
        }
        .typing-indicator {
            display: none;
            align-self: flex-start;
            background-color: #f1f1f1;
            padding: 12px 16px;
            border-radius: 18px;
            font-style: italic;
            color: #777;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            工商银行 智能理财经理
            <br><span>AI金融顾问 · 安全合规 · 个性化推荐</span>
        </div>
        <div class="chat-body" id="chatBody">
            <div class="message bot-message">
                您好！我是工商银行智能理财经理小智，很高兴为您服务！😊<br>
                请问您希望通过理财实现什么目标呢？例如：<br>
                • 资产保值增值<br>
                • 子女教育基金<br>
                • 养老规划<br>
                • 短期资金管理<br>
                欢迎告诉我您的想法！
            </div>
        </div>
        <div class="typing-indicator" id="typingIndicator">小智正在思考...</div>
        <div class="input-area">
            <input type="text" id="userInput" placeholder="请输入您的问题或需求..." autofocus />
            <button id="sendBtn">发送</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const chatBody = document.getElementById('chatBody');
            const userInput = document.getElementById('userInput');
            const sendBtn = document.getElementById('sendBtn');
            const typingIndicator = document.getElementById('typingIndicator');

            // 模拟产品库
            const products = {
                low: [
                    { name: '工银理财·鑫稳利', type: '固定收益类', apr: '2.8%~3.5%', term: '短期', risk: '低', desc: '适合短期闲置资金，风险极低，流动性好。' },
                    { name: '大额存单', type: '存款产品', apr: '2.6%~3.2%', term: '1-3年', risk: '无', desc: '保本保息，适合稳健型投资者。' }
                ],
                medium: [
                    { name: '工银理财·睿智封闭式', type: '混合类', apr: '3.5%~4.8%', term: '6个月-1年', risk: '中低', desc: '固收+策略，兼顾收益与稳定性。' },
                    { name: '结构性存款', type: '保本浮动收益', apr: '3.0%~4.5%', term: '3-6个月', risk: '中低', desc: '本金保障，收益挂钩市场表现。' },
                    { name: '合享系列', type: '混合类', apr: '4.5%~6.0%', term: '1年以上', risk: '中等', desc: '长期持有更优，适合平衡型客户。' }
                ],
                high: [
                    { name: '全鑫权益增强', type: '权益增强型', apr: '6.0%~8.0%', term: '1-3年', risk: '中高', desc: '部分投资于权益资产，波动较大但收益潜力高。' },
                    { name: '跨境优选QDII', type: '全球配置', apr: '浮动收益', term: '长期', risk: '高', desc: '投资海外市场，分散风险，追求超额回报。' }
                ]
            };

            // 发送消息函数
            function addMessage(text, isUser = false) {
                const messageDiv = document.createElement('div');
                messageDiv.className = isUser ? 'message user-message' : 'message bot-message';
                messageDiv.innerHTML = text;
                chatBody.appendChild(messageDiv);
                chatBody.scrollTop = chatBody.scrollHeight;
            }

            // 显示打字动画
            function showTyping() {
                typingIndicator.style.display = 'block';
                chatBody.scrollTop = chatBody.scrollHeight;
            }

            // 隐藏打字动画
            function hideTyping() {
                typingIndicator.style.display = 'none';
            }

            // 生成产品推荐卡片 HTML
            function generateProductCards(recs) {
                let cards = '<div style="margin-top: 10px;">为您精选的工行理财产品：</div>';
                recs.forEach(p => {
                    cards += `
                        <div class="product-card">
                            <h4>${p.name}</h4>
                            <p><strong>类型：</strong>${p.type} | <strong>风险：</strong>${p.risk}</p>
                            <p><strong>预期年化收益：</strong>${p.apr}</p>
                            <p><strong>期限：</strong>${p.term}</p>
                            <p>${p.desc}</p>
                        </div>
                    `;
                });
                return cards;
            }

            // AI 回应逻辑
            function getAIResponse(input) {
                input = input.toLowerCase();

                if (/你好|您好|hi|hello/.test(input)) {
                    return '您好！我是工行智能理财经理小智，请问您有什么理财需求呢？比如养老、教育、资产增值等？';
                }
                else if (/保值|保守|安全|不想亏/.test(input)) {
                    const recs = products.low;
                    return `根据您的需求，建议选择低风险产品：<br>` + generateProductCards(recs);
                }
                else if (/增值|稳健|平衡|慢慢涨/.test(input)) {
                    const recs = products.medium;
                    return `以下是适合稳健增值的理财产品推荐：<br>` + generateProductCards(recs);
                }
                else if (/高收益|进取|冲一把|多赚/.test(input)) {
                    const recs = products.high;
                    return `如果您能承受较高波动，可考虑以下产品：<br>` + generateProductCards(recs);
                }
                else if (/养老|退休|年纪大/.test(input)) {
                    return `针对养老规划，推荐长期稳健型产品：<br>` + 
                           generateProductCards([products.medium[2]]) + 
                           `<br>同时建议配置部分低风险产品以保障本金安全。`;
                }
                else if (/教育|孩子|上学/.test(input)) {
                    return `子女教育资金建议选择中短期、稳健型产品：<br>` + 
                           generateProductCards([products.low[0], products.medium[0]]) + 
                           `<br>确保资金在需要时可及时支取。`;
                }
                else if (/钱多|资产|百万|千万/.test(input)) {
                    return `对于高净值客户，我们建议多元化配置：<br>` +
                           generateProductCards([...products.medium, ...products.high]) +
                           `<br>可前往工行私人银行部获取专属财富管理方案。`;
                }
                else if (/怎么买|去哪买|手机/.test(input)) {
                    return `您可通过以下方式购买：<br>• 工商银行手机APP → 理财频道<br>• 网上银行 → 投资理财<br>• 前往就近网点咨询理财经理<br><br>所有产品均受银保监会监管，安全可靠。`;
                }
                else if (/风险|亏钱|安全/.test(input)) {
                    return `所有理财产品均不承诺保本保收益，历史业绩不代表未来表现。<br>请根据自身风险承受能力谨慎决策，建议先完成风险评估问卷。`;
                }
                else if (/谢谢|再见|拜拜/.test(input)) {
                    return '感谢您使用工商银行智能理财服务！祝您财富稳健增长，生活幸福美满！如有需要欢迎随时咨询。';
                }
                else {
                    return `感谢您的提问！为更好地为您推荐产品，请说明您的：<br>• 投资目标（如养老、教育）<br>• 风险偏好（保守/稳健/进取）<br>• 投资期限<br><br>例如：“我想为孩子准备教育基金，希望稳健增值。”`;
                }
            }

            // 发送消息事件
            function sendMessage() {
                const text = userInput.value.trim();
                if (text === '') return;

                // 添加用户消息
                addMessage(text, true);
                userInput.value = '';

                // 显示打字状态
                showTyping();

                // 模拟AI响应延迟
                setTimeout(() => {
                    hideTyping();
                    const response = getAIResponse(text);
                    addMessage(response, false);
                }, 1200);
            }

            // 绑定事件
            sendBtn.addEventListener('click', sendMessage);
            userInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        });
    </script>
</body>
</html>